<template>
<div class="container mt-4">
  <el-button class="ml-10 text-info" plain @click="dialogFormVisible = true">
    添加聊天室
  </el-button>
  <el-dialog v-model="dialogFormVisible" title="新建聊天室" width="500">
    <el-form :model="form">
      <el-form-item label="项目名称" :label-width="formLabelWidth">
        <el-input v-model="form.project_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="开始时间">
      <el-col :span="11">
        <el-date-picker
          type=date
          value-format="YYYY/MM/DD"
          v-model="startTime.date1"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="startTime.date2"
          value-format="HH:mm:ss"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="私人模式" :label-width="formLabelWidth">
        <el-switch v-model="form.is_private" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="createChatroom">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
    <ul :v-if="showChatrooms">
      <div class="row row-cols-3">
      <li v-for ="(item,index) in showChatrooms" :key="index">
    <div class="col mt-5" style="margin: auto;">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">科创项目:{{item.project_name}}</h5><br>
          <p class="card-text">发起人：{{item.admin_name}} </p>
          <p class="card-text">开始时间：{{item.start_time}}</p>
          <p class="card-text">在线人数：{{ item.onlineNumber }}</p>
          <button @click="getIntoLivChatroom(item.start_time,item.chatroom_id,item.project_name)" 
            type="button" class="btn btn-outline-primary" style="float: right;">加入</button>
        </div>
      </div>
    </div>
  </li> </div>
  </ul>
</div>
</template>


<script setup>
import axios from 'axios';
import { useRoute,useRouter} from 'vue-router';
import { ref,reactive, computed} from 'vue';
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus'

//路由query传参获取学生的ID
const route=useRoute()
const router=useRouter()
const user_id=route.query.user_id

//定义一个数据类型用于获取聊天室列表
let chatrooms=[]

//页面刷新之后先建立一个同步连接请求聊天室的数据
const findAllChatrooms=async()=>{
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/getAllChatrooms"
  })
  return result.data 
}
chatrooms=await findAllChatrooms()

let showChatrooms=computed({
    //遍历chatrooms数组将不符合条件的聊天室删除
    get(){
      for(let i=0;i<chatrooms.length;i++){
        if(chatrooms[i].is_private && chatrooms[i].admin_id !== user_id){
          chatrooms.splice(i,1)
        }
      }
      return chatrooms
    }
})

//点击添加聊天室
const dialogFormVisible = ref(false)
const formLabelWidth = '68px'

let startTime=reactive({
  date1:"",
  date2:""
})


const form = reactive({
  project_name:"",
  start_time:computed(()=>{
    return startTime.date1+" "+startTime.date2
  }),
  is_private:false,
  chatroom_id:"",
  admin_id:user_id,
})

async function createChatroom(){
  //发送数据到后端请求创建聊天室
  let isSuccess=await axios.post("http://localhost:8080/createChatroom",form)
  if(isSuccess){
    router.push({path:'/index/liveChatroom',query:{
    chatroom_id:isSuccess.data,
    user_id:user_id,
    project_name:form.project_name,
    admin_id:form.admin_id
  }})
  }
}
//用户点击，系统先判断聊天室是否已经开始，如果开始的话，再让用户加入，否则，提醒用户聊天室暂未开始，让用户决定进入与否
function getIntoLivChatroom(startTime,chatroom_id,project_name){
  //先判断聊天室时间是否已经到了开始的时间
  let nowTime=moment().format('YYYY-MM-DD HH:mm:ss')
  if(moment(nowTime).isBefore(startTime)){
    //弹窗告知用户开始时间，并让用户决定是否加入
    ElMessageBox.confirm('聊天室还没有开始是否加入？','提示',
    {
      confirmButtonText:'加入',
      cancelButtonText:"取消",
      type:'warning'
    })
    .then(()=>{
      router.push({path:'/index/liveChatroom',query:{
            chatroom_id:chatroom_id,
            user_id:user_id,
            project_name:project_name
            }})
    })
    .catch(()=>{
      ElMessage({
        type:"info",
        message:"取消成功"
      })
    })
    
  }
  else{
    router.push({path:'/index/liveChatroom',query:{
            chatroom_id:chatroom_id,
            user_id:user_id,
            project_name:project_name
            }})
  }
}
</script>

<style>

</style>